<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}汽车品牌互动平台{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .brand-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .brand-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .brand-image {
            height: 200px;
            object-fit: cover;
        }
        .comment-card {
            transition: box-shadow 0.3s ease;
        }
        .comment-card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .like-btn {
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .like-btn:hover {
            color: #dc3545;
        }
        .like-btn.liked {
            color: #dc3545;
        }
        .vote-btn {
            transition: all 0.2s ease;
        }
        .vote-btn.voted {
            background-color: #0d6efd;
            color: white;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="bi bi-car-front-fill me-2"></i>汽车品牌互动平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">首页</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    {% if 'user_id' in session %}
                        {% if session['is_admin'] %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ url_for('admin_panel') }}">
                                    <i class="bi bi-gear-fill me-1"></i>管理面板
                                </a>
                            </li>
                        {% endif %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle me-1"></i>{{ session['username'] }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="{{ url_for('logout') }}">退出登录</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('login') }}">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('register') }}">注册</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4 mb-5">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% block content %}{% endblock %}
    </div>

    <footer class="bg-light py-4 mt-auto">
        <div class="container text-center">
            <p class="mb-0">© 2023 汽车品牌互动平台 - 探索汽车世界的精彩</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 点赞功能
        document.addEventListener('DOMContentLoaded', function() {
            const likeButtons = document.querySelectorAll('.like-btn');
            
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const commentId = this.getAttribute('data-comment-id');
                    
                    fetch(`/comment/${commentId}/like`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            const likeCountElem = this.nextElementSibling;
                            let currentCount = parseInt(likeCountElem.textContent);
                            
                            if (data.action === 'like') {
                                this.classList.add('liked');
                                likeCountElem.textContent = currentCount + 1;
                            } else {
                                this.classList.remove('liked');
                                likeCountElem.textContent = currentCount - 1;
                            }
                        }
                    })
                    .catch(error => console.error('Error:', error));
                });
            });
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>